<template>
  <span>
    <el-form
      ref="dynamicform"
      :model="props.form"
      :size="props.formDesign.size ? props.formDesign.size : 'default'"
      :label-position="
        props.formDesign.labelPosition ? props.formDesign.labelPosition : 'right'
      "
      :validate-on-rule-change="
      props.form.validateOnRuleChange ? props.form.validateOnRuleChange : false
      "
      :hide-required-asterisk="props.formDesign.asterisk ? props.formDesign.asterisk : false"
      status-icon
      :rules="props.formDesign.rules ? props.formDesign.rules : {}"
      :inline="props.formDesign.inline ? props.formDesign.inline : false"
      :disabled="props.formDesign.disabled ? props.formDesign.disabled : false"
      :label-width="
        props.formDesign.labelWidth
          ? props.formDesign.labelWidth == 'auto'
            ? ''
            : props.formDesign.labelWidth
          : '20%'
      "
    >
      <slot name="header" />
      <el-form-item
        v-for="(item, index) in props.formDesign.formItems"
        :key="index"
        style="font-size:10px;"
        :prop="item.prop"
        :label="
          (item.events && item.events.isShow
          ? item.events.isShow()
          : true)
            ? item.label
            : ''
        "
      >
        <!-- :rules="item.rules ? item.rules : []" -->
        <!-- 通用组件 -->
        <ComFormSpan
          :item="item"
          :form="props.form"
          ref="ComFormSpan"
          :modelVisable="props.modelVisable"
          :isCustomizeImg="props.isCustomizeImg"
        ></ComFormSpan>
        <!-- 通用组件增加项 -->
        <ComFormSpanAdditional
          :item="item"
          :disabled="props.formDesign.disabled"
          :form="props.form"
        />
        <!-- 横向子表-->
        <!-- <SelectForm
          v-if="item.type == 'select-form'"
          :item="item"
          :form="props.form"
        /> -->
        <!-- 列展示子表 -->
        <ChildTable
          v-if="item.type == 'child-form'"
          :disabled="props.formDesign.disabled"
          :item="item"
          :form="props.form"
        />
        <HsTable
          v-if="item.type == 'table'"
          :tableParam="item.tableParam"
          :tableData="item.tableData"
          @select="item.select"
          @selectAll="item.selectAll"
        />
        <span v-if="item.type == 'slot-form'">
          <slot :name="item.prop" :item="item" :form="props.form"></slot>
        </span>
      </el-form-item>
      <div
        v-if="props.formDesign.showDivText"
        :style="props.formDesign.textDivStyle ? props.formDesign.textDivStyle : ''"
      >
        {{ props.formDesign.showDivText }}
      </div>
      <slot name="errMessage" />
      <div v-if="props.btns.length > 0" style="text-align:right;width:100%">
        <Buttons :btns="props.btns" :allBtnPermission="true"></Buttons>
      </div>
    </el-form>
  </span>
</template>
<script setup >
const { proxy } = getCurrentInstance();
const props = defineProps({
  formDesign: {
      type: Object,
      default: () => {},
      required: true
    },
    btns: {
      type: Array,
      default: () => [],
      required: false
    },
    form: {
      type: Object,
      default: () => {},
      required: false
    },
    modelVisable: {
      type: Boolean,
      default: false
    },
    isCustomizeImg: {
      type: Boolean,
      default: false
    }
})
// watch("props.modelVisable", (value) => {
//   if (props.formDesign && props.formDesign.resetForm) {
//     resetForm();
//   }
//   console.log("表单组件监听弹窗显示值", value);
// })

const fileBaseUrl=ref(localStorage.getItem("fileBaseUrl") || "")

function formatForm(){
  var items = props.formDesign.formItems;
      for (var i in items) {
        var item = items[i];
        if (item.prop && item.default) {
          props.form[item.prop] = item.default;
        }
      }
} 
function validateForm(){
  var result;
  proxy.$refs.dynamicform.validate(validate => {
    result = validate;
  });
  return result;
} 
const emits = defineEmits();
function resetForm(){
  emits("reset");
  proxy.$refs["dynamicform"].resetFields();
} 

</script>
<style lang="scss" scoped>
.auditImages {
  margin-left: 32px;
  margin-bottom: 12px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
  font-size: 14px;
  color: #606266;
  font-weight: 600;
  :deep(.picList) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 52px;
    .picItem {
      margin-left: 18px;
      width: 146px;
      height: 146px;
    }
  }
}
.el-select {
  width: 100%;
}
.el-form {
  font-size: 10px;
  border-radius: 3px;
  transition: 0.2s;
  padding: 10px;
}
.el-form-item_label {
  font-size: 7px;
}
.el-input__inner {
  display: block !important;
}
/* >>>.el-form-item{
  margin-bottom: 12px;
} */
</style>
